/**
  学籍管理-设置学生行政班级
*/
<template>
    <div class="set-stu-admini-class-container">
        <div v-if="indexKey === 0">
            <el-card shadow="never">
                <div class="edu-page-title">{{ $t("administrationClass.setStuAdminiClass") }}</div>
                <div class="stu-admini-class-content">
                    <el-form :model="formData" ref="formData" label-position="right" class="stu-admini-class-form">
                        <table>
                            <tbody>
                                <tr>
                                    <!-- 年级 -->
                                    <td class="stu-admini-class-td-title">{{ $t('administrationClass.grade') + '：' }}</td>
                                    <td class="stu-admini-class-td-content">
                                        <el-form-item prop="grade"
                                        :rules="[{ required: true, message: $t('administrationClass.requireGrade'), trigger: 'change' }]">
                                            <el-date-picker
                                                v-model="formData.grade"
                                                type="year"
                                                value-format="yyyy"
                                                :placeholder="$t('common.pla.pleaseSelect')"
                                                style="width: 70%"
                                                @change="(value) => gradeChange(value)">
                                            </el-date-picker>
                                        </el-form-item>
                                    </td>
                                </tr>
                                <tr>
                                    <!-- 学院 -->
                                    <td class="stu-admini-class-td-title">{{ $t('administrationClass.college') + '：' }}</td>
                                    <td class="stu-admini-class-td-content">{{ currentCollegeName }}</td>
                                </tr>
                                <tr>
                                    <!-- 专业 -->
                                    <td class="stu-admini-class-td-title">{{ $t('administrationClass.major') + '：' }}</td>
                                    <td class="stu-admini-class-td-content">
                                        <el-form-item prop="major"
                                        :rules="[{ required: true, message: $t('administrationClass.requireMajor'), trigger: 'change' }]">
                                            <el-select v-model="formData.major" :placeholder="$t('common.pla.pleaseSelect')" style="width: 70%;" @change="changeMajor">
                                                <el-option v-for="item in options.major" :label="item.label" :value="item.value" :key="item.key"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </td>
                                </tr>
                                <tr>
                                    <!-- 行政班级 -->
                                    <td class="stu-admini-class-td-title">{{ $t('administrationClass.adminClass') + '：' }}</td>
                                    <td class="stu-admini-class-td-content">
                                        <el-form-item prop="adminClass"
                                        :rules="[{ required: true, message: $t('administrationClass.requireAdminClass'), trigger: 'change' }]">
                                            <el-select v-model="formData.adminClass" :placeholder="$t('common.pla.pleaseSelect')" style="width: 70%;">
                                                <el-option v-for="item in options.adminClass" :label="item.label" :value="item.value" :key="item.key"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </el-form>
                    <div style="width: 100%;text-align: center;">
                        <el-button type="primary" @click="startToSet()">{{ $t('administrationClass.startToSet') }}</el-button>
                    </div>
                </div>
            </el-card>
        </div>
        <!-- 详情 -->
        <set-stu-admini-class-detail v-if="indexKey === 1" :parentParams="parentParams" @change-admini-class-index="changeAdminiClassIndex"></set-stu-admini-class-detail>
    </div>
</template>
<script>
import UTILS from 'common/src/utils/utils'
import { queryDic } from 'common/src/api/dictionary'
import { getAdminiClasses } from 'common/src/api/studentinfo'
import SetStuAdminiClassDetail from './SetStuAdminiClassDetail'
export default {
    name: "SetStuAdminiClassDirection",
    props: [],
    components: {
        'set-stu-admini-class-detail': SetStuAdminiClassDetail
    },
    data() {
        return {
            indexKey: 0,
            userInfo: {},
            formData: {
                grade: '',
                college: '',
                major: '',
                adminClass: ''
            },
            options: {
                grade: [],
                major: [],
                adminClass: []
            },
            currentCollegeName: '',
            currentCollegeCode: '',
            parentParams: {
                grade: '',
                collegeName: '',
                collegeCode: '',
                majorName: '',
                majorCode: '',
                adminClassName: '',
                adminClassCode: ''
            }
        };
    },
    mounted() {
        // 获取当前用户信息
        if (localStorage.getItem('sessiondata')) {
            if (JSON.parse(localStorage.getItem('sessiondata')).mockUser) {
                this.userInfo = JSON.parse(localStorage.getItem('sessiondata')).mockUser
            } else {
                this.userInfo = JSON.parse(localStorage.getItem('user'))
            }
            this.currentCollegeName = this.userInfo.facultyName
            this.currentCollegeCode = this.userInfo.faculty
        }
        
    },
    methods: {
        // 获取字典
        async getDictionaryData() {
            let _this = this
            // 筛选条件字典查询
            let data = {
                lang: this.$store.getters.language || 'cn',
                type: 'allChild',
                keys: ['G_ZY'],
                filter: {
                  facultys: [this.currentCollegeCode],
                  grade: this.formData.grade
                }
            }
            const dicResp = await queryDic(data)
            if (dicResp.code == 200 && dicResp.data) {
                let keyword = '其他'
                for (const key in dicResp.data) {
                    let items = []
                    let obj = dicResp.data[key]
                    for (const objKey in obj) {
                        items.push({
                            value: objKey,
                            label: obj[objKey]
                        })
                    }
                    items = _.sortBy(items, ['value'])
                    items = items
                        .filter(o => o.label.indexOf(keyword) == -1)
                        .concat(items.filter(o => o.label.indexOf(keyword) != -1))
                    _this.$set(_this.options, 'major', items)
                }
            }
        },
        // 修改年份
        gradeChange(val) {
            let _this = this
            _this.$set(_this.formData, 'major', '')
            _this.options.major = []
            _this.$set(_this.formData, 'adminClass', '')
            _this.options.adminClass = []
            if (val) {
                this.getDictionaryData()
                this.getAdminiClassData()
            }
        },
        // 修改专业
        changeMajor(val) {
            if (val) {
                this.getAdminiClassData()
            }
        },
        // 获取行政班级
        getAdminiClassData() {
            let _this = this
            _this.$set(_this.formData, 'adminClass', '')
            _this.options.adminClass = []
            getAdminiClasses({
                "pageNum_": 1,
                "pageSize_": 999999,
                "condition": {
                    "grade": this.formData.grade ? Number(this.formData.grade) : this.formData.grade,
                    "professionCode": this.formData.major
                }
            }).then(res => {
                if (res.code === 200 && Array.isArray(res.data.list) && res.data.list.length > 0) {
                    _this.options.adminClass = res.data.list.map(value => {
                        return {
                            label: this.$store.getters.language === 'en' ? value.nameEn : value.name,
                            value: value.code
                        }
                    })
                }
            })
        },
        // 开始设置
        startToSet() {
            this.$refs['formData'].validate(valid => {
                if (valid) {
                    this.parentParams.grade = this.formData.grade
                    this.parentParams.collegeName = this.currentCollegeName
                    this.parentParams.collegeCode = this.currentCollegeCode
                    this.parentParams.majorCode = this.formData.major
                    if (this.options.major.length > 0) {
                        this.parentParams.majorName = UTILS.translateLabel(this.options.major, this.formData.major, 'value', 'label')
                        ? UTILS.translateLabel(this.options.major, this.formData.major, 'value', 'label') : ''
                    }
                    this.parentParams.adminClassCode = this.formData.adminClass
                    if (this.options.adminClass.length > 0) {
                        this.parentParams.adminClassName = UTILS.translateLabel(this.options.adminClass, this.formData.adminClass, 'value', 'label')
                        ? UTILS.translateLabel(this.options.adminClass, this.formData.adminClass, 'value', 'label') : ''
                    }
                    this.indexKey = 1
                }
            })
        },
        changeAdminiClassIndex() {
            this.indexKey = 0
        }
    },
    watch: {
        
    }
};
</script>
<style lang="scss" scoped>
.set-stu-admini-class-container ::v-deep {
    .stu-admini-class-form {
        margin: 20px 0;
        table {
            width: 700px;
            margin: auto;
            border-collapse: collapse;
            .is-require {
                color: #f56c6c;
            }
            td {
                padding: 7px 4px;
                border: 1px solid #e4e7ed;
            }
            .stu-admini-class-td-title {
                width: 12.11%;
                text-align: right;
                background: #F5F7F9;
            }
            .stu-admini-class-td-content {
                width: 19.22%;
            }
        }
        .el-form-item {
            margin-bottom: 0px!important;
        }
    }
}
</style>